import React from 'react'
import { View, StyleSheet, Text } from 'react-native'
import CustomFlatList from '../../components/custom-flat-list/index'
import CustomButton from '../../components/button/CustomButton'
import RefreshState from '../../components/custom-flat-list/RefreshState'

export default class TestScrollFlatList extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      dataArr: [0, 1],
      hideItem: false
    }
    this.datas = [
      [2, 3, 4], [2, 3, 4, 5], [2]
    ]
  }

  componentDidMount () {
    console.info('testScroll componentDidMount')
  }

  render () {
    const { dataArr } = this.state
    return (
      <CustomFlatList
        style={styles.container}
        contentContainerStyle={styles.containerStyle}
        ref={this._customFlatListRef}
        defaultLength={2}
        data={dataArr}
        renderItem={this._renderItem}
        stickyHeaderIndices={[0, 1]}
        onHeaderRefresh={this._onHeaderRefresh}
        onFooterRefresh={this._onFooterRefresh}
        endFillColor={'black'}
        overScrollMode={'always'}
        ListHeaderComponent={this._headerComponent}/>
    )
  }

  _onHeaderRefresh = () => {

  }

  _onFooterRefresh = () => {
    console.info('testScroll _onFooterRefresh')
  }

  _customFlatListRef = (ref) => {
    this._cFlatListRef = ref
  }

  _headerComponent = () => {
    return (
      <View style={styles.headerView}>
        <Text>这是头</Text>
      </View>
    )
  }

  _renderItem = ({ item, index }) => {
    if (index === 0) {
      return this._renderFirstView()
    } else if (index === 1) {
      return (
        <CustomButton style={styles.secondView}>

        </CustomButton>
      )
    } else {
      return this._renderItemView(item)
    }
  }

  _renderItemView = (item) => {
    const { hideItem } = this.state
    return (
      <CustomButton style={styles.itemView} onPress={this._itemClick}>
        <Text>{item}</Text>
        {hideItem && (<View style={styles.itemOverView}/>)}
      </CustomButton>
    )
  }

  _itemClick =() => {
    console.info('_itemClick')
  }

  _renderFirstView = () => {
    return (
      <CustomButton style={styles.firstView} >
        <CustomButton style={styles.changeBtnView} onPress={this._onPress} params={0}>
          <Text>第一个</Text>
        </CustomButton>
        <CustomButton style={styles.changeBtnView} onPress={this._onPress} params={1}>
          <Text>第二个</Text>
        </CustomButton>
        <CustomButton style={styles.changeBtnView} onPress={this._onPress} params={2}>
          <Text>第三个</Text>
        </CustomButton>
        {/* <CustomButton style={styles.filterView}> */}
        {/* <CustomButton onStartShouldSetResponder={() => {return true}} style = {styles.filterContentView} onPress={this._filterContentClick}></CustomButton> */}
        {/* </CustomButton> */}
      </CustomButton>
    )
  }

  _filterContentClick = () => {
    console.info('_filterContentClick')
  }

  _onPress = (index) => {
    this.setState({
      hideItem: true
    }, () => {
      setTimeout(() => {
        this._setData(index)
      }, 3000)
    })
  }

  _setData = (index) => {
    this.setState({
      hideItem: false,
      dataArr: [0, 1].concat(this.datas[index])
    })
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  headerView: {
    backgroundColor: 'blue',
    height: 300,
    zIndex: 50
  },
  firstView: {
    backgroundColor: 'red',
    height: 100,
    flexDirection: 'row',
    zIndex: 10
  },
  changeBtnView: {
    flex: 1
  },
  secondView: {
    backgroundColor: 'purple',
    height: 100,
    zIndex: 11
  },
  itemView: {
    backgroundColor: 'yellow',
    height: 200,
    marginTop: 10
  },
  itemOverView: {
    position: 'absolute',
    top: 0,
    right: 0,
    left: 0,
    bottom: 0,
    backgroundColor: 'white'
  },
  filterView: {
    position: 'absolute',
    top: 100,
    width: '100%',
    zIndex: 50
  },
  filterContentView: {
    height: 500,
    backgroundColor: 'pink'
  },
  containerStyle: {
    minHeight: 1000
  }
})
